<template>
	<view class="mx-arena-info">
		<view class="info-title">
			<image class="arena-logo" :src="logoUrl"></image>
			<view class="arena-name">
				<text>{{contact.cnname}}</text>
				<text class="opening">营业时间:{{contact.opening}}</text>
			</view>
		</view>
		
		<view class="info-cards">
			<view class="card-item">
				<view class="card-item-content card-item-content-info phone-icon">
					<view class="info-item-title">电话</view>
					<view class="info-item-content">{{contact.phone}}</view>
				</view>
			</view>
			
			<view class="card-item">
				<view class="card-item-content card-item-content-info address-icon">
					<view class="info-item-title">地址</view>
					<view class="info-item-content">{{contact.address}}</view>
				</view>
			</view>
			
			<view class="card-item" @tap="toMyArena">
				<view class="card-item-content arena-icon">
					<view class="">
						预约记录
					</view>
				</view>
			</view>
			
			<view class="card-item" @tap="toOrder">
				<view class="card-item-content arena-icon">
					<view class="">
						订场
					</view>
				</view>
			</view>
			
<!-- 			<view class="card-item" @tap="toMyCourse">
				<view class="card-item-content course-icon">
					<view class="">
						课程信息
					</view>
				</view>
			</view> -->
		</view>
		
<!-- 		<view class="info-btns">
			<MxInfoBtn img="/static/imgs/vip-card.png" name="会员卡" to="/pages/shop/shop" />
			<MxInfoBtn img="/static/imgs/course.png" name="课程" to="/pages/course/course" :redirect="true" :tabCurrent="2" />
			<MxInfoBtn img="/static/imgs/book-arena.png" name="预约场地" to="/pages/book-arena/book-arena" :redirect="true" :tabCurrent="1" />
			<MxInfoBtn img="/static/imgs/store.png" name="商店" :web="true" :to="shopUrl" />
		</view> -->
	</view>
</template>

<script>
	import { imgUrl,baseURL,shopPath } from '@/utils/config.js'
	import MxInfoBtn from '@/components/index/MxInfoBtn.vue'
	import * as contactApi from '@/api/contact.js'
	export default {
		components: {
			MxInfoBtn
		},
		data() {
			return {
				contact: {}
			}
		},
		computed: {
			logoUrl() {
				if(!this.contact?.image) return
				return imgUrl + this.contact.image.file_path
			},
			
			shopUrl() {
				// const { protocol, host } = window.location
				// return `${protocol}//${host}/shop`
				return baseURL +shopPath
			}
		},
		created() {
			// 获取联系信息
			contactApi.info().then(res => {
				this.contact = res.data
			})
			
		},
		methods: {
			toMyArena() {
				uni.navigateTo({
					url: "/pages/mine/my-arena"
				})
			},
			
			toOrder(){
				uni.navigateTo({
					url: "/pages/book-arena/book-arena"
				})
			},
			
			toMyCourse() {
				uni.navigateTo({
					url: "/pages/mine/member-course"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/var.scss';
	@import '@/common/scss/mixins.scss';
	.mx-arena-info{
		font-family: $font-family;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 20rpx;
		padding-bottom: 60rpx;
		width: 100%;
		.info-title{
			padding: 34rpx 0;
			display: flex;
			.arena-logo{
				width: 160rpx;
				min-width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
			
			.arena-name{
				margin-left: 34rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-family: $font-family;
				text:first-child{
					font-size: 20px;
					font-weight: bold;
				}
				
				text:last-child{
					font-size: 15px;
				}
			}
		}
		
		.info-cards{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.card-item{
				margin-bottom: 44rpx;
				width: 344rpx;
				height: 142rpx;
				background-repeat: no-repeat;
				background-size: 40px 40px;
				background-position: right bottom;
				border-radius: 6px;
				background: $bg-gradient;
				color: #fff;
				.card-item-content{
					box-sizing: border-box;
					padding: 0 26rpx;
					width: 100%;
					height: 100%;
					background-position: 108% 140%;
					background-repeat: no-repeat;
					background-size: 100rpx 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					
					&.card-item-content-info{
						padding-top: 16rpx;
						justify-content: flex-start;
					}
					
					&.phone-icon{
						background-image: url('~@/static/imgs/index-info-tele.png');
					}
					
					&.address-icon{
						background-image: url('~@/static/imgs/index-info-address.png');
					}
					
					&.arena-icon{
						background-image: url('~@/static/imgs/index-info-arena.png');
					}
					
					&.course-icon{
						background-image: url('~@/static/imgs/index-info-course.png');
					}
					
					.info-item-title{
						font-size: 12px;
					}
					
					.info-item-content{
						font-size: 14px;
						font-weight: bold;
						@include line-ellipsis(2);
					}
				}
			}
		}
		
		.info-btns{
			display: flex;
			justify-content: space-between;
		}
	}
</style>
